<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

	<title>Excelsior</title>

	<!-- Fichiers de style -->
	<link rel="stylesheet" href="css/hint.min.css" />
	<link rel="stylesheet" href="css/fonts.css" />
	<link rel="stylesheet" href="css/layout.css" />
	<link rel="stylesheet" href="css/story.css" />
	<link rel="stylesheet" href="css/spellbook.css" />
	<link rel="stylesheet" href="css/stats.css" />

	<!-- Fichiers core -->
	<script src="js/core/lib/domready.js"></script>
	<script src="js/core/misc/functions.js"></script>
	<script src="js/core/misc/Input.js"></script>
	<script src="js/core/lib/ImageInGame/IIG.js"></script><!-- DOCUMENTATION : https://github.com/jmpp/ImageInGame.js -->
	<script src="js/core/misc/Achievement.js"></script>
	<script src="js/core/misc/ParticleGenerator.js"></script>

	<!-- Fichiers de configuration -->
	<script src="js/conf/game.cfg.js"></script>	
	<script src="js/conf/hud.cfg.js"></script>	
	<script src="js/conf/level.cfg.js"></script>	
	<script src="js/conf/spell.cfg.js"></script>	
	<script src="js/conf/player.cfg.js"></script>	
	<script src="js/conf/playerManager.cfg.js"></script>	
	<script src="js/conf/enemy.cfg.js"></script>

	<!-- Fichiers sources -->
	<script src="js/main/Game.js"></script>	
	<script src="js/main/Menu.js"></script>	
	<script src="js/main/Hud.js"></script>
	<script src="js/main/ScoreManager.js"></script>	
	<script src="js/main/Level.js"></script>	
	<script src="js/main/LevelManager.js"></script>	
	<script src="js/main/Spell.js"></script>	
	<script src="js/main/SpellManager.js"></script>	
	<script src="js/main/Player.js"></script>	
	<script src="js/main/PlayerManager.js"></script>	
	<script src="js/main/Enemy.js"></script>	
	<script src="js/main/EnemyManager.js"></script>	


	<!-- Fichiers écrans -->
	
	<!-- Fichier core -->

	<!-- Tutorial -->

</head>
<body role="main">
	
	<div id="gameArea">
		<div id="main_menu">

			<div id="shortcuts">
				<div class="row">
					<div id="shortcut_story" class="block hint--error hint--top" data-hint="Journey">
						<img src="img/icon/journey.png" class="shortcut" width="128" />
					</div>
					<div id="shortcut_spellbook" class="block hint--error hint--top" data-hint="Spellbook">
						<img src="img/icon/burning-book.png" class="shortcut" width="128" />
					</div>
				</div>
				<div class="row">
					<div id="shortcut_stats" class="block hint--error hint--top" data-hint="Stats & Achievements">
						<img src="img/icon/crowned-skull.png" class="shortcut" width="128" />
					</div>
					<div id="shortcut_settings" class="block hint--error hint--top" data-hint="Settings">
						<img src="img/icon/auto-repair.png" class="shortcut" width="128" />
					</div>
				</div>
			</div>

			<div id="story" class="hide sub_menu">
				<div class="close">x</div>

				<div id="levels">
				</div>
			</div>

			<div id="spellbook" class="hide sub_menu">
				<div class="close">x</div>
				<div id="spells">
					<div class="row">
						<div id="spell_0" class="spell block shortcut add_spell">
						</div>
						<div id="spell_1" class="spell block shortcut add_spell">
						</div>
						<div id="spell_2" class="spell block shortcut add_spell">		
						</div>
					</div>
					<div class="row">
						<div id="spell_3" class="spell block shortcut lock">
						</div>
						<div id="spell_4" class="spell block shortcut lock">
						</div>
						<div id="spell_5" class="spell block shortcut lock">
						</div>					
					</div>
				</div>

				<div id="custom" class="hide">
					<div class="close">x</div>
					<div class="left">
						<div id="preview" data-hint="Click to browse" class="hint--left hint--error">
						</div>
						<div id="name_block" data-hint="Spell Name" class="hint--left hint--error">
							<input id="spell_name" value="">
						</div>

						<div id="button_block">
							<a href="#" id="save">Save</a>
							<a href="#" id="cancel">Cancel</a>
						</div>
					</div>
					<div class="right">
						<div id="damage_block" class="input_block hint--error hint--right" data-hint="Damage inflicted to target">
							<label for="damage">Damage</label>
							<input type="text" id="damage" class="input" name="damage" value="" min="0" max="10"/>
							<div class="button_block">
								<img src="img/menus/plus.png" class="plus"/>
								<img src="img/menus/minus.png" class="minus"/>
							</div>
						</div>
						<div id="distance_block" class="input_block hint--error hint--right" data-hint="Distance before spell explode">
							<label for="distance">Distance</label>
							<input type="text" id="distance" class="input" name="distance" value="" min="0" max="10"/>
							<div class="button_block">
								<img src="img/menus/plus.png" class="plus"/>
								<img src="img/menus/minus.png" class="minus"/>
							</div>
						</div>
						<div id="size_block" class="input_block hint--error hint--right" data-hint="Size of spell">
							<label for="size">Size</label>
							<input type="text" id="size" class="input" name="size" value="" min="0" max="10"/>
							<div class="button_block">
								<img src="img/menus/plus.png" class="plus"/>
								<img src="img/menus/minus.png" class="minus"/>
							</div>
						</div>
						<div id="multi_block" class="input_block hint--error hint--right" data-hint="Number of target can be hit">
							<label for="multi">Multi</label>
							<input type="text" id="multi" class="input" name="multi" value="" min="0" max="10"/>
							<div class="button_block">
								<img src="img/menus/plus.png" class="plus"/>
								<img src="img/menus/minus.png" class="minus"/>
							</div>
						</div>
						<div id="element_block" class="input_block hint--error hint--right" data-hint="Element of spell">
							<label for="element">Element</label>
							<select class="input" id="element" name="element">
							</select>
							<div class="button_block">
								<img src="img/menus/plus.png" class="plus"/>
								<img src="img/menus/minus.png" class="minus"/>
							</div>
						</div>
						<div id="cooldown_block" class="input_block hint--error hint--right" data-hint="Waiting time between 2 instance">
							<label for="cooldown">Cooldown</label>
							<span id="cooldown" class="input"></span><span class="seconds">s</span>
						</div>


						<div class="input_block hide">
							<input type="text" id="icon" name="icon" value="" />
						</div>
						<div class="input_block hide">
							<input type="text" id="name" name="name" value="" />
						</div>
					</div>
				</div>
			</div>

			<div id="stats" class="hide sub_menu">
				<div class="close">x</div>
				<div id="score">
					<p id="best_score">Your best score is : <span id="best_score_value"></span></p>
				</div>
			</div>

			<div id="settings" class="hide sub_menu">
				<div class="close">x</div>
				<p>Settings</p>
			</div>
		</div>


		<canvas id="gameCanvas" width="960" height="438"></canvas>

		<div id="gameover"></div>
	</div>

	<div id="header" class="disable-select">
	</div>

	<script>

		/**
		 * Global vars
		 **/

		var canvas, // Canvas
			CTX, // 2D context
			run, // Game Loop
			WIDTH, // Game area Width
			HEIGHT, // Game area Height
			input, // Input instance
			game, // instance of Game
			tuto, // instance of Tuto
			achievement, //instance of Achievement
			currentGameObject, // instance of a GameObject
			IM, // Image Manager instance
			soundLoader, // Sound Loader instance
			isLoadedImages,
			deltaTime, //independance framerate
			TIME; 
			
		canvas = $('#gameCanvas');
		CTX = canvas.getContext('2d');

		isLoadedImages = false;
		
		deltaTime = Date.now();
		// Uniquement si le canvas doit faire la taille de l'écran !
		/*WIDTH = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		HEIGHT = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;*/
		
		// Uniquement si le canvas a une taille fixe
		WIDTH = 960;
		HEIGHT = 438;

		// Title Screens
		active_bg = 'wait';

		/**
		 * Démarrage du jeu
		 **/
		initGame = function() {
			currentGameObject.init();
		}

		/**
		 * Démarrage d'une partie
		 **/
		startGame = function() {
			currentGameObject.start();
			run();
		}

		/**
		 * Arrêt de la partie
		 **/
		stopGame = function() {
			currentGameObject.clear();
		}

		/**
		 * Ecran d'attente du jeu (après chargement des données)
		 **/
		waitingGame = function() {
			// Waiting for press any key
			if (interval(deltaTime, 1)) {
				if (active_bg == 'clean') {
					// CTX.drawImage(clean_bg,0,0);
					active_bg = 'wait';

				}
				else {
					// CTX.drawImage(wait_bg,0,0);
					active_bg = 'clean';
				}
				deltaTime = +new Date();
			}
		}

		/**
		 * Initialisation des sons
		 **/
		initSounds = function() {
			
		}
		
		/****************** GAME LOOP *******************/
		/**
		 * Boucle de jeu
		 * @param temps de jeu
		 **/
		run = function(_t) {
			TIME = _t;
			// Si le jeu doit être nettoyer (eg. pour redémarrer)
			if(currentGameObject.cleared === true) {
				currentGameObject.clear();
			}
			// Si le jeu est en attente d'un input joueur
			else if (currentGameObject.waiting === true) {
				// Crée un écouteur sur les évènements clavier/souris
				input.listen();
				// Au déclenchement d'un input
				if (input.keyboard.keypressed || input.mouse.click) {
					// Bloque la saisie d'input
					input.mouse.click = false;

					// Déclence le jeu
					currentGameObject.init();
				}
				// Sinon
				else {
					// Laisse l'écran d'attente
					waitingGame();
				}
			}
			// Si le jeu est en cours
			else if(currentGameObject.stop === false) {
				// Met à jour les sprites
				IM.update();

				// Met à jour le controller principal du jeu
				currentGameObject.update();

				// Nettoire l'écouteur d'évènement clavier/souris
				input.mouse.click = false;
			}

			// On continue à appeller la boucle de gameplay seulement si le jeu n'est pas sur Stop
			if (!currentGameObject.stop) {
				// Rappel la boucle de jeu
				requestAnimationFrame(run);
			}
		};
		/*************** ENDING GAME LOOP ***************/
		
		// INSTANCES
		input = new Input({
            target : $('#gameArea')
        });
		game = new Game();
		achievement = new Achievement();
		IM = new IIG.ImageManager();
	
		// PATH
		var path = { 
			img : "img/", 
			spells : {
				small : "img/icon/spells/50x50/",
				large : "img/icon/spells/512x512/"
			},
			sound : "sound/" 
		};
	
        // Ajout des sprites du jeu qui doivent être chargés
        IM.add('img/background/sky.png');
        for (x in PlayerConf.sprites) {
        	IM.add(PlayerConf.sprites[x].img);
        }
        for (x in EnemyConf) {
        	for (y in EnemyConf[x].sprites)
        		IM.add(EnemyConf[x].sprites[y].img);
        }
        for (x in LevelConf) {
        	for (y in LevelConf[x].sprites)
        		IM.add(LevelConf[x].sprites[y].img);
        }
        // IM.add(LevelConf.sprites.clouds.img);
        // IM.add(LevelConf.sprites.grounds.img);
        // Spells
        for (x in SpellConf.previewIcons) {
        	if (!isNaN(x)) {
	        	IM.add( path.spells.small + SpellConf.previewIcons[x] );
	        	IM.add( path.spells.large + SpellConf.previewIcons[x] );
	        }
        }


		currentGameObject = game;

		// Initialisation du jeu
		initGame();

	</script>

</body>
</html>